<template>
	<view class="bg">
		<u-modal v-model="htjdshow" :content="content" :show-cancel-button='true' @confirm="define"></u-modal>
		<u-toast ref="uToast" />
		<u-form :model="dcfkFrom" ref="uForm" :rules="rules" label-width="160" :label-style="{
        fontSize: '24rpx',
        fontFamily: 'PingFang SC',
        fontWeight: '400',
        color: '#272B32',
      }">
			<view class="item">
				<u-form-item label="回退节点" :required="true" prop="dcfs">
					<u-input type="select" v-model="dcfkFrom.dcfs" placeholder="请选择" @click='pick' />
				</u-form-item>
			</view>
			<view class="item">
				<u-form-item label="节点回退原因" label-position="top" :required="true" prop="fkms">
					<u-input v-model="dcfkFrom.fkms" type="textarea" placeholder="请输入节点回退原因" />
				</u-form-item>
			</view>
		</u-form>
		<view class="buttons">
			<view @click="cancel">取消</view>
			<view @click="submit">提交</view>
		</view>
		<u-picker v-model="show" mode="selector" :range="typeArr" range-key='nodeName' @confirm="selectType"></u-picker>
	</view>
</template>

<script>
	import {
		xmlcSubmit,
		xmlcSelect
	} from "@/request/zdxm.js"
	export default {
		data() {
			return {
				typeArr: [],
				show: false,
				htjdshow: false,
				content: '是否提交该节点回退',
				id: null,
				role: uni.getStorageSync('role'),
				dataObj: {},
				rules: {
					dcfs: [{
						required: true,
						message: '请选择回退节点',
						trigger: ['change', 'blur'],
					}],
					fkms: [{
						required: true,
						message: '请输入节点回退原因',
						trigger: ['change', 'blur'],
					}],
				},
				dcfkFrom: {
					dcfs: "",
					fkms: "",
					backToNode: ''
				},
			};
		},
		onLoad(option) {
			this.dataObj = JSON.parse(option.item)
			console.log(this.dataObj)
			this.id = option.id
			this.xmlcSelect()
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			xmlcSelect() {
				xmlcSelect({
					subProcessCode: this.dataObj.subProcessCode
				}).then((res) => {
					this.typeArr = res.data.result
				})
			},
			selectType(e) {
				this.dcfkFrom.dcfs = this.typeArr[e[0]].nodeName
				this.dcfkFrom.backToNode = this.typeArr[e[0]].id
			},
			pick() {
				this.show = true
			},
			cancel() {
				uni.navigateBack({
					delta: 1
				});
			},
			define() {
				xmlcSubmit({
						needBackNode: this.dataObj.processSubDetailCode,
						backRemarks: this.dcfkFrom.fkms,
						backToNode: this.dcfkFrom.backToNode
					})
					.then((res) => {
						if (res.data.code === 200) {
							this.$refs.uToast.show({
								title: res.data.message,
								type: "success",
								duration: 2000,
								callback() {
									uni.navigateBack({
										delta: 1
									});
								}
							});
						}
					})
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.htjdshow = true
					} else {
						console.log('验证失败');
					}
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.task_one {
		background-color: rgba(255, 255, 255, 1);
		padding: 24rpx;
		position: relative;
		margin-bottom: 40rpx;
		box-shadow: 0px 0px 24rpx 0px rgba(48, 116, 255, 0.1);
		border-radius: 24rpx 8rpx 8rpx 8rpx;

		.line {
			width: 1rpx;
			height: calc(100% - 48rpx);
			// background-color: pink;
			position: absolute;
			left: 44rpx;
			top: 24rpx;
			border-left: 1rpx dashed rgba(48, 116, 255, 0.1);
			// z-index: 5;
		}

		.task_name {
			display: flex;
			padding-bottom: 40rpx;
		}

		.task_child {
			padding: 20rpx 0;
			border-top: 1rpx solid rgba(231, 233, 240, 1);
			border-bottom: 1rpx solid rgba(231, 233, 240, 1);
		}

		.task_test {
			display: flex;
			align-items: flex-start;
			margin: 20rpx 0;
		}

		.task_left {
			flex: 2.5;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #8e9cb3;
		}

		.task_left3 {
			flex: 3.2;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #8e9cb3;
		}

		.nameFont {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #272b32;
		}

		.task_right {
			flex: 7;
			display: flex;
			align-items: center;

			.childFont {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #272b32;
			}

			.zt_type1 {
				margin-left: 10rpx;
				background: #f85f78;
				border-radius: 4rpx;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(255, 255, 255, 0.7);
				padding: 0 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.zt_type2 {
				margin-left: 10rpx;
				background: rgba(250, 173, 51, 1);
				border-radius: 4rpx;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(255, 255, 255, 0.7);
				padding: 0 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	// .sub_title {
	// 	height: 95rpx;
	// 	line-height: 95rpx;
	// 	padding-left: 20rpx;
	// 	font-size: 28rpx;
	// 	font-family: PingFang SC;
	// 	font-weight: 500;
	// 	color: #3074ff;
	// 	margin: 0;
	// }

	.info {
		margin: 0 auto;
		background: #ffffff;
		box-shadow: 0rpx 0rpx 24rpx 0rpx rgba(48, 116, 255, 0.1);
		border-radius: 8rpx;
		padding: 0 24rpx;

		.info_item {
			display: flex;
			flex-flow: row nowrap;
			justify-content: flex-start;
			padding: 20rpx 0;

			view:nth-child(1) {
				width: 150rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #8e9cb3;
				display: flex;
				flex-flow: row nowrap;
				justify-content: center;
				align-items: center;
				padding: 0 20rpx;
			}

			view:nth-child(2) {
				flex: 1;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #272b32;
				display: flex;
				flex-flow: row nowrap;
				justify-content: flex-start;
				align-items: center;
				margin-left: 20rpx;
			}
		}

		.info_item_header {
			border-bottom: 1rpx solid rgba(231, 233, 240, 1);
			padding: 0;
		}
	}

	.item {
		width: 710rpx;
		margin: 0 auto;
		margin-bottom: 30rpx;
		background: #ffffff;
		box-shadow: 0rpx 0rpx 24rpx 0rpx rgba(48, 116, 255, 0.1);
		border-radius: 8rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.buttons {
		width: 100%;
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-content: center;
		position: fixed;
		bottom: 0;
		left: 0;

		view:nth-child(1) {
			flex: 1;
			background: #ffffff;
			border: 1rpx solid #e7e9f0;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #8e9cb3;
		}

		view:nth-child(2) {
			flex: 1;
			background: #3074ff;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #fefefe;
		}
	}
</style>
